<template>
<div id="">
  <div class="container">
    <input type="button" class="btn btn-success" value="isShow" @click="btn()">
    <transition name="dong">
       <div class="box" v-show="isShow"></div>
    </transition>

  </div>

</div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    btn() {
      this.isShow = !this.isShow
    }
  }
}
</script>
<style scoped>
.box {
  width: 200px;
  height: 200px;
  background: green;
}
.dong-enter-active,.dong-leave-active{
  transition: 0.5s
}
.dong-enter{
  transform: translate(300px,300px) rotate(200deg);
 opacity: 0
}
.dong-leave-active{
  transform: translate(300px,300px) rotate(200deg);
 opacity: 0
}
</style>
